<template>
  <div class="inventory-container">
    <h1 class="inventory-title">库存列表</h1>
    <el-button type="primary" @click="addItem" class="add-button">添加新库存项</el-button>
    <el-table :data="inventory" style="width: 100%" border class="inventory-table">
      <el-table-column prop="name" label="名称" width="200" />
      <el-table-column prop="quantity" label="当前库存" width="180">
        <template #default="scope">
          <span :class="{'low-stock': scope.row.quantity <= lowStockThreshold}">
            {{ scope.row.quantity }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="editItem(scope.row)">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑库存项的模态框 -->
    <el-dialog v-model="editingItemDialog" title="编辑库存项" width="40%" class="modal">
      <el-form :model="editingItem" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="editingItem.name" readonly />
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="editingItem.quantity" :min="0" required />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editingItemDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getInventoryItems, updateInventoryItem, deleteInventoryItem } from '@/api/inventory';
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const inventory = ref([]);
    const router = useRouter();
    const lowStockThreshold = 10; // 设置库存预警阈值
    const editingItem = ref(null);
    const editingItemDialog = ref(false);

    const fetchInventory = async () => {
      try {
        const response = await getInventoryItems();
        inventory.value = response.data;
      } catch (error) {
        console.error('Error fetching inventory:', error);
      }
    };

    const editItem = (item) => {
      editingItem.value = { ...item }; // 使用深拷贝避免直接修改原始数据
      editingItemDialog.value = true;
    };

    const handleSubmit = async () => {
      if (!editingItem.value) return;
      try {
        await updateInventoryItem(editingItem.value.id, editingItem.value);
        editingItemDialog.value = false; // 关闭模态框
        await fetchInventory(); // 刷新库存列表
      } catch (error) {
        console.error('Error updating inventory item:', error);
      }
    };

    const deleteItemById = async (id) => {
      try {
        await deleteInventoryItem(id);
        fetchInventory(); // 更新库存列表
      } catch (error) {
        console.error('Error deleting inventory item:', error);
      }
    };

    const addItem = () => {
      router.push('/inventory/add');
    };

    // 实现定时刷新库存数据
    watch(() => {}, () => {
      setInterval(fetchInventory, 60000); // 每分钟刷新一次
    }, { immediate: true });

    onMounted(fetchInventory);

    return {
      inventory,
      lowStockThreshold,
      editItem,
      deleteItem: deleteItemById,
      addItem,
      editingItem,
      editingItemDialog,
      handleSubmit,
    };
  },
};
</script>

<style scoped>
.inventory-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8f8f8;
}

.inventory-title {
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.add-button {
  margin-bottom: 20px;
}

.inventory-table {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.low-stock {
  color: #f56c6c;
  font-weight: bold;
}

.el-table th.el-table__cell {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: bold;
  text-align: center !important;
}

.el-table td.el-table__cell {
  text-align: center;
}

.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.modal {
  text-align: center;
}

.el-dialog {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #409eff;
  color: #fff;
  padding: 16px 20px;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  background-color: #f5f7fa;
  border-top: 1px solid #ebeef5;
  padding: 10px 20px;
}

.el-form-item__label {
  color: #303133;
  font-weight: 500;
}

.el-input-number {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>